import React from 'react';
import { Space, Table, Button } from 'antd';
import Form from './form';

class App extends React.Component {
  state = {
    data: [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '11',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '21',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '31',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '12',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '22',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '32',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '13',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '23',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '33',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: 'Action',
        key: 'action',
        render: (_, record) => (
          <Space size="middle">
            <a
              onClick={() => {
                this.remove(record);
              }}
            >
              Delete
            </a>
            <a
              onClick={() => {
                this.upDateModal(record);
              }}
            >
              updateData
            </a>
          </Space>
        ),
      },
    ],
    status: 0,
    showModal: false,
    update: [],
  };
  //删除
  remove = (val) => {
    this.setState({
      data: this.state.data.filter((item) => {
        return item.key !== val.key;
      }),
    });
  };
  //增加
  addDataModal = () => {
    this.setState({ showModal: true, status: 0 });
  };
  addData = (val) => {
    const key = +new Date();
    const obj = { ...val, key };
    this.setState({
      data: [...this.state.data, obj],
    });
  };
  //跟新
  upDateModal = (val) => {
    this.setState({ showModal: true, status: val.key, update: val });
    this.refs.form.formRef.setFieldsValue(val);
  };
  updateData = (val) => {
    const { data, status } = this.state;
    const obj = { key: status, ...val };
    const index = data.findIndex((item) => item.key === status);
    const newArr = [...data];
    // newArr.splice(index, 1, obj)
    newArr[index] = obj;
    this.setState({
      data: newArr,
    });
  };

  //关闭
  closeModal = () => {
    this.setState({ showModal: false });
  };
  render() {
    const { data, columns, status, showModal, update } = this.state;
    return (
      <>
        <Button type="primary" onClick={this.addDataModal}>
          Add a row
        </Button>
        <Form
          ref="form"
          status={status}
          showModal={showModal}
          addData={this.addData}
          updateData={this.updateData}
          closeModal={this.closeModal}
        />
        <Table columns={columns} dataSource={data} />
      </>
    );
  }
}

export default App;
